<!--
 * @description:
 * @fileName: MenuManagementEdit
 * @author: lhx
 * @date: 2022/3/15-3:43 下午
 * @version: V1.0.0
-->
<template>
  <cs-dialog
    :dialog="drawerData"
    @onSubmit="save"
  >
    <div slot="content">
      <el-form ref="form" :model="formInline" :rules="rules" size="small" label-width="80px" style="margin-right: 10px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parentId">
              <treeselect
                v-model="formInline.parentId"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                :default-expand-level="1"
                placeholder="选择上级菜单"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="title">
              <el-input v-model="formInline.title" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="morder">
              <el-input-number
                v-model="formInline.morder"
                style="width: 100%"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="menuType">
              <el-select
                v-model="formInline.menuType"
                filterable
                class="size-full"
                clearable
              >
                <el-option label="目录" value="M" />
                <el-option label="菜单" value="C" />
                <el-option label="按钮" value="F" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formInline.menuType === 'F'" label="权限标识" prop="perm">
              <el-input v-model="formInline.perm" placeholder="请权限标识" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formInline.menuType !== 'F'" label="组件名称" prop="name">
              <el-input v-model="formInline.name" placeholder="请输入组件名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="formInline.menuType !== 'F'" label="菜单图标">
              <el-popover
                placement="bottom-start"
                width="650"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="formInline.icon" placeholder="点击选择图标" clearable>
                  <i
                    v-if="formInline.icon ? formInline.icon.indexOf('el-icon') !== -1 : false"
                    slot="prefix"
                    :class="formInline.icon"
                  />
                  <svg-icon
                    v-else-if="formInline.icon"
                    slot="prefix"
                    :icon-class="formInline.icon"
                    class="el-input__icon"
                    style="height: 32px;width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="formInline.menuType !== 'F'" label="组件路径" prop="component">
              <el-input v-model="formInline.component" :disabled="componentDisabled" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formInline.menuType !== 'F'" label="路由地址" prop="path">
              <el-input v-model="formInline.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formInline.menuType !== 'F'" label="重定向" prop="redirect">
              <el-input v-model="formInline.redirect" placeholder="请输入重定向地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formInline.menuType !== 'F'" label="活动菜单" prop="activeMenu">
              <el-input v-model="formInline.activeMenu" placeholder="请输入活动菜单" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formInline.menuType !== 'F'" label="缓存路由" prop="rootPaths">
              <el-input v-model="formInline.rootPaths" placeholder="请输入缓存路由" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formInline.menuType !== 'F'" label="是否隐藏" prop="hidden">
              <el-select
                v-model="formInline.hidden"
                filterable
                class="size-full"
                clearable
              >
                <el-option label="展示" :value="'1'" />
                <el-option label="隐藏" :value="'0'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="status">
              <el-select
                v-model="formInline.status"
                filterable
                class="size-full"
                clearable
              >
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formInline.remark" type="textarea" placeholder="备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </cs-dialog>
</template>

<script>
import { addSysMenu, chgSysMenu } from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import IconSelect from '@/components/IconSelect/index'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
const mainDirectoryId = 0

export default {
  name: 'MenuManagementEdit',
  components: { Treeselect, IconSelect },
  props: {
    // 菜单树选项
    menuOptions: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      drawerData: {
        show: false,
        width: '50%',
        // top: '20px',
        hiddenFooter: false,
        title: {
          title: ''
        }
      },
      formInline: {
        parentId: 0,
        enable: '1',
        hidden: '1',
        icon: '',
        component: '',
        morder: 0,
        menuType: 'M'
      },
      // 表单校验
      rules: {
        parentId: [{ required: true, message: '上级菜单不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '组件名称不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        perm: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
        component: [{ required: true, message: '组件路径不能为空', trigger: 'blur' }],
        menuType: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
        enable: [{ required: true, message: '是否启用不能为空', trigger: 'blur' }],
        hidden: [{ required: false, message: '是否隐藏不能为空', trigger: 'blur' }]
      },
      componentDisabled: false
    }
  },
  watch: {
    'formInline.menuType': {
      handler(newV, oldV) {
        if (newV === 'M') {
          this.componentDisabled = true
          if (this.formInline.parentId === mainDirectoryId) {
            this.formInline.component = '#'
          } else {
            this.formInline.component = '#E'
          }
        } else if (newV === 'C') {
          this.componentDisabled = false
          // 判断是否是修改菜单
          if (this.drawerData.title.title !== '修改菜单' || this.formInline.component === '#' || this.formInline.component === '#E') {
            this.formInline.component = ''
          }
        } else {
          this.componentDisabled = true
          this.formInline.component = ''
        }
      },
      immediate: true
    },
    'formInline.parentId': {
      handler(newV, oldV) {
        if (newV != null && this.drawerData.title.title !== '修改菜单') {
          this.formInline.menuType = ''
        }
      }
    }
  },
  methods: {
    showEdit(row) {
      if (!row) {
        this.drawerData.title.title = '新增菜单'
        this.formInline = this.$options.data().formInline
        this.formInline.component = '#'
      } else {
        this.drawerData.title.title = '修改菜单'
        this.formInline = Object.assign({}, row)
        this.$set(this.formInline, 'menuType', !this.formInline.component ? 'F' : (this.formInline.component === '#' || this.formInline.component === '#E') ? 'M' : 'C')
        delete this.formInline.children
      }
      this.drawerData.show = true
    },
    close() {
      this.$refs['form'].resetFields()
      this.formInline = this.$options.data().formInline
      this.drawerData.show = false
    },
    // 选择图标
    selected(name) {
      this.$set(this.formInline, 'icon', name)
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children,
        isDisabled: !(node.component || node.id === mainDirectoryId)
      }
    },
    save(callback) {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          let data = {}
          data = Object.assign({}, data, this.formInline)
          data.parentId = data.parentId === mainDirectoryId ? null : data.parentId
          if (this.drawerData.title.title === '修改菜单') {
            chgSysMenu(data).then(response => {
              this.$baseMessage.success('修改成功')
              this.$emit('fetch-data')
              // 强制刷新浏览器
              // this.$router.go(0)
              callback(true)
            })
          } else {
            addSysMenu(data).then(response => {
              this.$baseMessage.success('新增成功')
              this.$emit('fetch-data')
              // 强制刷新浏览器
              // this.$router.go(0)
              callback(true)
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .vue-treeselect__control {
    background: $base-content-background;
  }
  .vue-treeselect__input {
    color: #FFFFFF;
  }
  //.vue-treeselect__menu {
  //  background: $base-content-background;
  //}
}
</style>
